<!DOCTYPE html>
<html>
        <head>
                <title>Argus: visitor status map</title>
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                <meta charset="utf-8">

                <style>
                html, body, #map_canvas {
			font-size: 20pt;
                        height: 100%;
                        margin: 0px;
                        padding: 0px
                }
                </style>
        <script src="/static/jquery-latest.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABr0u2Ibrr0CZmxaGnOhHWsOKar7ZFWaA&sensor=false"></script>
        <script type="text/javascript">

    function initializemap() {
                var myLatLng = new google.maps.LatLng(25, 0);
                var zoomlevel = 2;
                if (screen.height > 2000){
                        zoomlevel = 4;
                }
                else if (screen.height > 1000) {
                        zoomlevel = 3;
                }
                var myOptions = {
                  zoom: zoomlevel,
                  center: myLatLng,
                  mapTypeId: google.maps.MapTypeId.TERRAIN
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	        
                var icon1 = {
                        url: "/static/mm_20_blue.png",
                        scaledSize: new google.maps.Size(6, 10),
                        anchor: new google.maps.Point(3,10)
                };
                var icon2 = {
                        url: "/static/mm_20_purple.png",
                        scaledSize: new google.maps.Size(12, 20),
                        anchor: new google.maps.Point(6,20)
                };
                var icon3 = {
                        url: "/static/mm_20_yellow.png",
                        scaledSize: new google.maps.Size(18, 30),
                        anchor: new google.maps.Point(9,30)
                };
                var icon4 = {
                        url: "/static/mm_20_red.png",
                        scaledSize: new google.maps.Size(24, 40),
                        anchor: new google.maps.Point(12,40)
                };
        	{% for c in citys %}{% if c.pageview %}
                    var marker = new google.maps.Marker({
                      position: new google.maps.LatLng({{c.latitude}}, {{c.longitude}}),
                      map: map,
                      title: '{{c.name}}',
                      icon: icon{{c.pageview}}
                    });
		{% endif %}{% endfor %}

	}

</script>
</head>
<body onload="initializemap()">
    <div>
    <img src='/static/mm_20_blue.png'>1~9 PV</img>
    <img src='/static/mm_20_purple.png'>10~99 PV</img>
    <img src='/static/mm_20_yellow.png'>100~999 PV</img>
    <img src='/static/mm_20_red.png'>1000+ PV</img>
    (from 2011-11-08 16:54:43)
<!--
<p>
{% for c in citys %}{% if c.pageview %}[{{c.latitude}}, {{c.longitude}}, '{{c.name}}', icon{{c.pageview}}],{% endif %}{% endfor %}
</p>
-->
</div>
    <div id="map_canvas"></div>
</body>
</html>


<!--
  function load() {
    if (GBrowserIsCompatible()) {
      function Point(lat,longi,html,icon) {
        this.gpoint = new GMarker(new GLatLng(lat,longi),icon);
        this.html = html;
      }
  
      function Map(id,points,lat,longi,zoom) {
        this.id = id;
        this.points = points;
        this.gmap = new GMap2(document.getElementById(this.id));
        this.gmap.setCenter(new GLatLng(lat, longi), zoom);
        this.markerlist = markerlist;
        this.addmarker = addmarker;
        this.array2points = array2points;
  
        function markerlist(array) {
           for (var i in array) {
              this.addmarker(array[i]);
           }
        }
  
        function array2points(map_points) {
          for (var i in map_points) {
            points[i] = new Point(map_points[i][0],map_points[i][1],map_points[i][2],map_points[i][3]);
          }
          return points;
        }
  
        function addmarker(point) {
          if (point.html) {
            // change click to mouseover or other mouse action
            GEvent.addListener(point.gpoint, "click", function() { 
                point.gpoint.openInfoWindowHtml(point.html);
            });
          }
          this.gmap.addOverlay(point.gpoint);
        }
  
        this.points = array2points(this.points);
        this.markerlist(this.points);
      }
  
  
  
      var map = new Map('map',map_points,35,150,2);
  
      map.gmap.addControl(new GMapTypeControl());
      map.gmap.addControl(new GSmallMapControl());
    }
  }

-->
